<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/06.css">
</head>
<body>
    <ol>
        <li>伪类 ：是类样式的一种，
            不会在标签上以class属性的方式显示定义，依据于标签状态变化css自动增加的状态类样式; <br>
            标签状态=>页面显示式，用户和标签进行交换时的状态 <br>
            [其它选择器]:active 激活伪类 - 鼠标点击 <br>
            [其它选择器]:hover 悬浮伪类(焦点伪类) - 鼠标悬停 <br>
            [其它选择器]:foucs 获取焦点伪类 - [具有输入功能的标签] <br>
            [其它选择器]:link 针对于a标签，标签当前连接未被访问过(a标签未访问的默认效果为蓝色) <br>
            [其它选择器]:visited 针对于a标签，标签当前被访问过(a标签已访问的默认效果为紫色) <br>
            所以开发中如果需要彻底去除 a 标签的状态样式，需要同时设置 :active,:hover,:visited样式
        </li>
    </ol>
    <div class="diva">
        测试激活和悬停
        <span>【测试伪类选择器组合】</span>
    </div>
    <br>
    <input type="button" value="按钮">
    <hr>
    <p class="pdom">测试悬停</p>
    <hr>
    <a class="adom" href="https://www.baidu.com">百度</a>
    <hr>
    <input type="text" value="默认值">
    <hr>

    <ol>
        <li>
            伪元素：通过使用元素样式为非元素内容增加样式效果的选择器 <br>
            [选择器]::first-letter 指定选择器内容中的第一个字符 <br>
            [选择器]::first-line 指定选择页面呈现结果的第一行文本进行样式设置，需配合br使用 <br>
            [选择器]::selection 表示选中文本 <br>
            [选择器]::after 表示前置内容定义选择器(在选中器内容之后增加额外文本)【必须定义content样式】<br>
            [选择器]::befer 表示后置内容定义选择器(在选中器内容之前增加额外文本)【必须定义content样式】<br>
            [选择器]::marker 等效于 ::befer ,用于表示列表符合【必须为选择器定义display: list-item;样式】<br>
        </li>
    </ol>
    <div class="title">
        <span>在</span>head标签体中引入对应的css文件
    </div>
    <br>
    <div class="title">
        在head标签体中引入对应的css文件
    </div>
    <br>
    <div class="info">
        在head标签体中引入对应的css文件 <br>
        在head标签体中引入对应的aaaaaaa
    </div>
    <hr>
    <p class="paragraph">在head标签体中引入对应的css文件</p>
    <hr>
    <div class="p-list">
        <p>在head标签体中引入对应的css文件</p>
        <p>在head标签体中引入对应的css文件</p>
        <p>在head标签体中引入对应的css文件</p>
        <p>在head标签体中引入对应的css文件</p>
    </div>
    <hr>
    <ul>
        <li>在head标签体中引入对应的css文件</li>
        <li>在head标签体中引入对应的css文件</li>
        <li>在head标签体中引入对应的css文件</li>
    </ul>
    <hr>
    <ol>
        <li>
            在head标签体中引入对应的css文件
            <ol>
                <li>在head标签体中引入对应的css文件</li>
                <li>在head标签体中引入对应的css文件</li>
                <li>在head标签体中引入对应的css文件</li>
            </ol>
        </li>
        <li>在head标签体中引入对应的css文件
            <ol>
                <li>在head标签体中引入对应的css文件</li>
                <li>在head标签体中引入对应的css文件</li>
            </ol>
        </li>
    </ol>

</body>
</html>